<template>
  <el-dialog
    class="y-dialog"
    :fullscreen="fullscreen"
    width="1000px"
    append-to-body
    destroy-on-close
  >
    <template #header>
      <div>
        <slot name="title">
          <div v-if="history" class="y-history-toolbar">
            <y-history-toolbar
              :prefix="prefix"
              :historys="historys"
              :command="command"
            />
            <div class="title">{{ title }}</div>
          </div>
          <div v-else>{{ title }}</div>
        </slot>
        <div class="full-screen" @click="toggleFullscreen">
          <el-icon v-if="fullscreen">
            <Minus />
          </el-icon>
          <el-icon v-else="fullscreen">
            <FullScreen />
          </el-icon>
        </div>
      </div>
    </template>
    <el-scrollbar style="hight:{{maxhight}}">
      <slot></slot>
    </el-scrollbar>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<script setup name="YDialog">
const { proxy } = getCurrentInstance();

const emit = defineEmits(["fullscreenChange"]);

const fullscreen = ref(false);
const props = defineProps({
  title: { type: String, default: "Dialog" },
  maxhight: { type: String, default: "100px" },
  history: { type: Boolean, default: false },
  prefix: { type: Number, default: 0 },
  historys: { type: Array, default: [] },
  command: { type: Function, default: undefined },
});

function toggleFullscreen() {
  fullscreen.value = !fullscreen.value;
  proxy.$emit("fullscreenChange", fullscreen.value);
}
</script>

<style lang="scss" scoped>
.y-dialog {
  .full-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4px;
    right: 25px;
    width: 54px;
    height: 36px;
    color: var(--el-color-info);
    cursor: pointer;
  }

  .full-screen:hover {
    color: var(--el-color-primary);
  }

  .y-history-toolbar {
    display: flex;
    align-items: center;
    position: absolute;
    top: 4px;
    height: 54px;

    .title {
      left: 100px;
    }
  }
}
</style>
